<template>
  <div>
    <van-popup v-model="popupshow" round :close-on-click-overlay="false">
      <div class="xxfrom">
        <div class="titleYHzc">用户注册</div>
        <van-form label-width="60px">
          <van-cell-group>
            <van-field
              v-model="modelXX.mobile"
              name="validatePhone"
              label="手机号"
              placeholder="请输入手机号"
              :rules="[{ validator: validatePhone, message: phoneError }]"
            />
          </van-cell-group>
          <div class="marginTop15">
            <van-button round block type="primary" @click="handleSubmit">
              提交验证
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  addUserMobile02,
} from "@/api/realAssets/icsharedstation/home";
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      Tabbar: [],
      modelXX: {
        mobile: "",
        ishid: JSON.parse(sessionStorage.getItem("userInfo")).userId,
        code: "",
        userName: JSON.parse(sessionStorage.getItem("userInfo")).name,
      },
      popupshow: false,
      phoneError: "",
    };
  },
  mounted() {
    this.popupshow = true;
  },
  methods: {
    handleSubmit() {
      if (!this.validatePhone()) return;
      this.popupshow = false;
      Dialog.confirm({
        title: "手机号确认",
        message: "手机号为：【" + this.modelXX.mobile + "】",
      })
        .then(() => {
          console.log(this.modelXX);
          addUserMobile02(this.modelXX).then((res) => {
            if (res.resultMessage == "FAILED") {
              Toast.fail(res.data);
              return;
            }
            Toast.success("注册成功");
            //注册成功后把信息存本地
            setTimeout(() => {
              //注册成功后跳转到地理位置选择
              this.$router.replace({
                name: "rvicsharedstation-DQ",
              });
            }, 2000);
          });
        })
        .catch(() => {
          this.modelXX.mobile = "";
          this.popupshow = true;
        });
    },
    // 是否可以发送验证码
    // const canSendSms = computed(() => {
    //   return validatePhone() && countdown.value === 0;
    // });
    validatePhone() {
      const reg = /^1[3-9]\d{9}$/;
      if (!this.modelXX.mobile) {
        this.phoneError = "请输入手机号";
        return false;
      }
      if (!reg.test(this.modelXX.mobile)) {
        this.phoneError = "手机号格式不正确";
        return false;
      }
      this.phoneError = "";
      return true;
    }
  },
}
</script>

<style lang="less" scoped>
@import "../static/css/index.less";
.xxfrom {
  width: 300px;
  padding: 10px;
}
.titleYHzc {
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #282829;
}
</style>
